<script lang="ts"></script>

<template>
  <scroll-view
    scroll-y
    @scrolltolower="onscrollViewLowest"
    :bindscroll="tbindscroll"
  >
    <!-- 封面 -->
    <view class="logo">
      <image :src="contributeDetail?.picture" mode="aspectFit" />
    </view>
    <!-- 简短信息 -->
    <view>
      <uni-card
        :title="contributeDetail.title"
        :extra="contributeDetail.briefIntroduction"
        class="itemCard"
      >
        <text class="uni-body">{{ contributeDetail?.summary }} </text>
      </uni-card>
    </view>
    <!-- 内容，显示文件 -->
    <view class="content">
      <button open-type="" hover-class="button-hover" @click="openFile">
        <text>下载并打开稿件</text>
      </button>
    </view>
    <book-comment ref="commentInstance" :id="props.id" />
  </scroll-view>
</template>

<script lang="ts" setup>
import { getContributeById } from "@/api/content/contribute";
import type { Contribute } from "@/types/mycontribute";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

// scroll-view
const tbindscroll = (e:any)=>{
  console.log(e)
}
let scrollHeight = uni.getSystemInfoSync().windowHeight;
console.log("windowHeight", scrollHeight);

// 获取路由
// 子组件
const commentInstance = ref();
const onscrollViewLowest = () => {
  console.log("调用commentInstance接口方法,onlowest");
  // 调用接口方法
  commentInstance.value.onLowestOfScroll();
};

const props = defineProps<{
  id: number;
}>();
console.log("detailId:", props);
const contributeDetail = ref<Contribute>({});

// 文件预览
const openFile = () => {
  const fileUrl = contributeDetail.value.url!;
  if (fileUrl.length == 0 || fileUrl == null) {
    uni.showToast({
      title: "无下载内容",
      duration: 2000,
      icon: "error",
    });
    return;
  }

  uni.downloadFile({
    // 示例 url，并非真实存在
    url: fileUrl,
    success: function (res) {
      console.log("rr_res", res);
      const filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        success: function (res) {
          console.log("打开文档成功", res);
        },
        fail: function (res) {
          console.log("打开文档失败", res);
        },
      });
    },
  });
};

// 启动
onLoad(async () => {
  contributeDetail.value = (await getContributeById(props.id)).data;
});
</script>

<style lang="scss">
@import "/src/assert/styles/variables.scss";

page {
  height: 110%;
}

.logo {
  margin: 20rpx;
  height: 360rpx;
  width: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  button {
    background-color: $el-secondary-color;
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-bottom: 20px;
  }
}
</style>
